{include file="public/header" /}
<!--main content start-->
<section class="main-content-wrapper">
    <section id="main-content">
        <div class="row">
    <div class="col-md-12">
        <!--饼形图-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">蜘蛛统计(饼形图)</h3>
            </div>
            <div class="row">
                <div class="col-md-2" style="padding-right: 0;">
                    <input type="text" id="pie_start_time" class="form-control form_datetime4" placeholder="开始时间">
                </div>
                <div class="col-md-2" style="padding-left: 0;padding-right: 0">
                    <input type="text" id="pie_end_time" class="form-control form_datetime4" placeholder="结束时间">
                </div>
                <input type="button" class="btn btn-primary" style="float: right;margin-right: 2%;" value="搜索" onclick="search('pie')">
            </div>
            <div class="panel-body col-md-12">
                <div id="pie_main" style="width:100%;height:400px;"></div>
            </div>
        </div>
        <!--柱状图-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">蜘蛛统计(柱状图)</h3>
            </div>
            <div class="row">
                <div class="col-md-2" style="padding-right: 0;">
                    <input type="text" id="line_start_time" class="form-control form_datetime4" placeholder="开始时间">
                </div>
                <div class="col-md-2" style="padding-left: 0;padding-right: 0">
                    <input type="text" id="line_end_time" class="form-control form_datetime4" placeholder="结束时间">
                </div>
                <input type="button" class="btn btn-primary" style="float: right;margin-right: 2%;" value="搜索" onclick="search('line')">
            </div>
            <div class="panel-body col-md-12">
                <div id="line_main" style="width:100%;height:400px;"></div>
            </div>
        </div>
    </div>
</div>
    </section>
</section>

<!--main content end-->
<!--百度echarts-->
<script src="/web_admin/js/echarts.common.min.js"></script>
<script>
    search('pie');
//    line_chatrs(1,2)
    function search(type){
        if(type=='pie'){
            var start_time = $('#pie_start_time').val();
            var end_time = $('#pie_end_time').val();
        }
        if(type=='line'){
            var start_time = $('#line_start_time').val();
            var end_time = $('#line_end_time').val();
        }
        if(type=='pie'){
            $.ajax({
                type: "GET",  //提交方式
                url: "/admin/seo/spider_charts",//路径
                data: 'type=pie&start_time='+start_time+'&end_time='+end_time,
                dataType: "json",
                success: function (data) {
                    if(data.status==0){
                        var data = data.data;
                        pie_chatrs(data.spider_name,data.value);
                    }else{
                        alert('charts加载失败!');
                    }
                }
            });
        }
        if(type=='line'){
            var datas = 'type=line&start_time='+start_time+'&end_time='+end_time;
            $.ajax({
                type: "GET",  //提交方式
                url: "/admin/seo/spider_charts",//路径
                data: datas,
                dataType: "json",
                success: function (data) {
                    if(data.status==0){
                        var data = data.data;
                        var html;
                        var line = 'line';
                        html = '<div style="background-color: #d8d8da;text-align: center;height: 400px;"><ul style="height: 300px;margin-top: 50px;overflow-y: auto;">'
                        for (var i=0;i<data.length;i++)
                        {
                            html += '<li style="list-style-type:none;height: 40px;line-height: 40px;cursor: pointer;" class="spider_name">'+data[i]+'</li>'
                        }
                        html += '</ul></div>'
                        $('#line_main').html(html);
//                        pie_chatrs(data.spider_name,data.value);
                    }else{
                        alert('charts加载失败!');
                    }
                }
            });
//            line_chatrs(data.spider_name,data.value);
        }
    }

    $(document).on('click','.spider_name',function(){
        var name = $(this).text();
        var start_time = $('#line_start_time').val();
        var end_time = $('#line_end_time').val();
        var datas = 'type=line&start_time='+start_time+'&end_time='+end_time+'&spider='+name;
        $.ajax({
            type: "GET",  //提交方式
            url: "/admin/seo/spider_charts",//路径
            data: datas,
            dataType: "json",
            success: function (data) {
                if(data.status==0){
                    $('#line_main').html('');
                    var data = data.data;
                    line_chatrs(data.date,data.value);
                }else{
                    alert('charts加载失败!');
                }
            }
        });

    });

    function pie_chatrs(data,val){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('pie_main'));
        option = {
            title : {
                text: '蜘蛛访问记录',
                subtext: '饼形图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:val,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function line_chatrs(data,val){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('line_main'));
        option = {
            title: {
                text: '抓取次数',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'
            },
            legend: {
                left: 'left',
                data: val
            },
            xAxis: {
                type: 'category',
                name: 'x',
                splitLine: {show: false},
                data: data
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'log',
                name: 'y'
            },
            series: [
                {
                    name: '抓取次数',
                    type: 'line',
                    data: val
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>

<style>
    /*时间插件*/
    .add-on{display:inline-block;width:auto;height:40px;min-width:16px;padding:4px 5px;font-size:14px;font-weight:normal;line-height:32px;text-align:center;text-shadow:0 1px 0 #fff;background-color:#eee;border:1px solid #ccc}
    .input-prepend .add-on:first-child{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}
    .input-append .add-on{margin-left: -4px;}
    .input-append .add-on:last-child{margin-left:-4px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
    [class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;margin-top:1px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("http://cdn.bootcss.com/twitter-bootstrap/2.2.2/img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat}
    .icon-th{background-position:-240px 0}
    .icon-remove{background-position:-312px 0}
    @media screen and (max-width: 850px) {
        .add-on {
            display: table-cell
        }
    }

</style>

<!--时间插件-->
<script src="/web_admin/js/bootstrap-datetimepicker.min.js"></script>
<link href="/web_admin/css/datetimepicker.css" rel='stylesheet' type='text/css' />


<script>
    $(".form_datetime4").datetimepicker({
        format: "yyyy-mm-dd hh:ii",
        autoclose: true,
        todayBtn: true
    });
</script>
{include file="public/footer" /}